<?php
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="JO_JS/stickytooltip.js"></script>
<link rel="stylesheet" type="text/css" href="JO_CSS/stickytooltip.css" />

<div style="float: right;width: 200px;">
<p>Some page contents here...</p>
<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
<p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
<p><a data-tooltip="sticky3" href="">ádasd</a></p>
<p>Some page contents here...</p>
</div>
<!--HTML for the tooltips-->
<!--<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>

<div id="sticky2" class="atip"  style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>

<div id="sticky3" class="atip">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
</div>

</div>

<div class="stickystatus"></div>
</div>-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

    <div id="sticky1" class="atip">
Sticky Tooptip 1 content here...
</div>

<div id="sticky2" class="atip">
Sticky Tooptip 2 content here...
</div>
<div id="sticky3" class="atip">
Sticky Tooptip 3 content here...
</div>
</div>
<div class="stickystatus"></div>
</div>

<script>
infotooltip.init("*[data-tooltip]", "mystickytooltip");
</script>